<template>
  <view class="list-container">
    <!-- 医院信息 -->
    <view class="hospital-info card" @tap="navigateToHospital">
      <image :src="hospital.logo" mode="aspectFit" class="logo" />
      <view class="info">
        <text class="name">{{ hospital.name }}</text>
        <text class="address">{{ hospital.address }}</text>
        <view class="tags">
          <text v-for="(tag, idx) in hospital.tags" :key="idx">{{ tag }}</text>
        </view>
      </view>
    </view>

    <!-- 分类标题 -->
    <view class="category-header">
      <text class="title">{{ categoryName }}</text>
      <text class="count">共{{ departments.length }}个科室</text>
    </view>
    
    <!-- 科室列表 -->
    <view class="department-list">
      <view 
        class="department-item card"
        v-for="(dept, index) in departments"
        :key="index"
        @tap="navigateToDetail(dept)"
      >
        <view class="header">
          <view class="hospital-tag">
            <image :src="hospital.logo" mode="aspectFit" class="logo" />
            <text class="name">{{ hospital.name }}</text>
          </view>
          <view class="left">
            <image :src="dept.icon" mode="aspectFit" class="icon" />
            <view class="title-wrap">
              <text class="name">{{ dept.name }}</text>
              <text class="desc">{{ dept.description }}</text>
            </view>
          </view>
          <text class="status" :class="dept.status">{{ dept.statusText }}</text>
        </view>
        
        <view class="info-grid">
          <view class="info-item">
            <text class="label">挂号费</text>
            <text class="value" :class="{ free: dept.fee === 0 }">
              {{ dept.fee === 0 ? '免费' : `¥${dept.fee}` }}
            </text>
          </view>
          <view class="info-item">
            <text class="label">医生数量</text>
            <text class="value">{{ dept.doctorCount }}人</text>
          </view>
          <view class="info-item">
            <text class="label">今日号源</text>
            <text class="value">{{ dept.availableCount }}个</text>
          </view>
          <view class="info-item">
            <text class="label">综合评分</text>
            <text class="value rating">{{ dept.rating }}分</text>
          </view>
        </view>
        
        <view class="doctors">
          <view class="doctor" v-for="(doctor, idx) in dept.doctors" :key="idx">
            <image :src="doctor.avatar" mode="aspectFill" />
            <view class="info">
              <text class="name">{{ doctor.name }}</text>
              <text class="title">{{ doctor.title }}</text>
            </view>
          </view>
        </view>
        
        <button class="book-btn primary-btn" @tap.stop="bookDepartment(dept)">
          立即预约
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const categoryName = ref('')
const departments = ref([
  {
    id: 1,
    name: '心内科',
    icon: '/static/department/cardiology.png',
    description: '心血管疾病诊治',
    status: 'available',
    statusText: '可预约',
    fee: 60,
    doctorCount: 8,
    availableCount: 25,
    rating: 4.9,
    doctors: [
      {
        name: '张医生',
        title: '主任医师',
        avatar: '/static/doctor/doctor1.jpg'
      },
      {
        name: '李医生',
        title: '副主任医师',
        avatar: '/static/doctor/doctor2.jpg'
      }
    ]
  },
  // ... 更多科室数据
])

// 医院信息
const hospital = ref({
  id: 1,
  name: '澳门镜湖医院',
  logo: '/static/hospital/kiang-wu.jpg',
  address: '澳门连胜马路33号',
  tags: ['综合医院', '24小时急诊', '特需门诊'],
  rating: 4.8,
  distance: 2.5
})

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const category = page.$page?.options?.category || '全部科室'
  const hospitalId = page.$page?.options?.hospitalId
  categoryName.value = category
  
  // 加载数据
  loadHospitalInfo(hospitalId)
  loadDepartments(category)
})

// 加载医院信息
const loadHospitalInfo = (hospitalId) => {
  // 这里应该是从API获取医院信息
  console.log('加载医院信息:', hospitalId)
}

const navigateToDetail = (dept) => {
  uni.navigateTo({
    url: `/pages/department/detail?id=${dept.id}&hospitalId=${hospital.value.id}`
  })
}

const bookDepartment = (dept) => {
  uni.navigateTo({
    url: `/pages/appointment/doctor?departmentId=${dept.id}`
  })
}

const loadDepartments = (category) => {
  // 加载科室数据的逻辑
}

const navigateToHospital = () => {
  uni.navigateTo({
    url: `/pages/hospital/detail?id=${hospital.value.id}`
  })
}
</script>

<style lang="scss">
.list-container {
  min-height: 100vh;
  background: $bg-color;
  padding-bottom: 20rpx;
  
  .hospital-info {
    margin: 20rpx;
    display: flex;
    align-items: center;
    
    .logo {
      width: 100rpx;
      height: 100rpx;
      border-radius: $radius-md;
      margin-right: 20rpx;
    }
    
    .info {
      flex: 1;
      
      .name {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 8rpx;
        display: block;
      }
      
      .address {
        font-size: 26rpx;
        color: $text-regular;
        margin-bottom: 12rpx;
        display: block;
      }
      
      .tags {
        text {
          display: inline-block;
          font-size: 22rpx;
          color: $primary-color;
          background: $primary-light;
          padding: 4rpx 12rpx;
          border-radius: $radius-sm;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
        }
      }
    }
  }
  
  .category-header {
    background: #fff;
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: $shadow-sm;
    
    .title {
      font-size: 34rpx;
      color: $text-primary;
      font-weight: bold;
    }
    
    .count {
      font-size: 26rpx;
      color: $text-secondary;
    }
  }
  
  .department-list {
    padding: 20rpx;
    
    .department-item {
      margin-bottom: 20rpx;
      
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        
        .hospital-tag {
          display: flex;
          align-items: center;
          padding-bottom: 16rpx;
          margin-bottom: 16rpx;
          border-bottom: 1rpx solid #eee;
          
          .logo {
            width: 32rpx;
            height: 32rpx;
            border-radius: $radius-sm;
            margin-right: 8rpx;
          }
          
          .name {
            font-size: 24rpx;
            color: $text-regular;
          }
        }
        
        .left {
          display: flex;
          align-items: center;
          
          .icon {
            width: 60rpx;
            height: 60rpx;
            margin-right: 16rpx;
          }
          
          .title-wrap {
            .name {
              font-size: 32rpx;
              color: $text-primary;
              font-weight: bold;
              margin-bottom: 6rpx;
              display: block;
            }
            
            .desc {
              font-size: 26rpx;
              color: $text-secondary;
            }
          }
        }
        
        .status {
          font-size: 24rpx;
          padding: 4rpx 12rpx;
          border-radius: $radius-sm;
          
          &.available {
            color: $success;
            background: rgba($success, 0.1);
          }
          
          &.busy {
            color: $warning;
            background: rgba($warning, 0.1);
          }
          
          &.full {
            color: $danger;
            background: rgba($danger, 0.1);
          }
        }
      }
      
      .info-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20rpx;
        margin-bottom: 20rpx;
        
        .info-item {
          text-align: center;
          
          .label {
            font-size: 24rpx;
            color: $text-secondary;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .value {
            font-size: 28rpx;
            color: $text-primary;
            font-weight: bold;
            
            &.free {
              color: $success;
            }
            
            &.rating {
              color: $warning;
            }
          }
        }
      }
      
      .doctors {
        display: flex;
        margin-bottom: 20rpx;
        overflow-x: auto;
        
        &::-webkit-scrollbar {
          display: none;
        }
        
        .doctor {
          display: flex;
          align-items: center;
          margin-right: 30rpx;
          flex-shrink: 0;
          
          &:last-child {
            margin-right: 0;
          }
          
          image {
            width: 80rpx;
            height: 80rpx;
            border-radius: 40rpx;
            margin-right: 12rpx;
            border: 2rpx solid rgba($primary-color, 0.1);
          }
          
          .info {
            .name {
              font-size: 26rpx;
              color: $text-primary;
              font-weight: bold;
              margin-bottom: 4rpx;
              display: block;
            }
            
            .title {
              font-size: 22rpx;
              color: $text-secondary;
            }
          }
        }
      }
      
      .book-btn {
        width: 100%;
        margin-top: 20rpx;
        
        &:active {
          transform: scale(0.98);
        }
      }
    }
  }
}
</style> 